<!--延迟加载-->
<script setup>
defineOptions({
  name:'hdcd'
})
import {onMounted, ref} from "vue";
onMounted(() => {
  const menuButton = document.querySelector('.menu-button');
  console.log(menuButton,'menuButton')
  var openMenu = function () {
    swiperhdcd.slidePrev();
  };
const  swiperhdcd = new Swiper('.hdcd', {
    slidesPerView: 'auto',
    initialSlide: 1,
    resistanceRatio: 0,
    slideToClickedSlide: true,
    on: {
      slideChangeTransitionStart: function () {
        const slider = this;
        console.log(slider.activeIndex,'slider.activeIndex')
        if (slider.activeIndex === 0) {
          menuButton.classList.add('cross');
          // required because of slideToClickedSlide
          menuButton.removeEventListener('click', openMenu, true);
        } else {
          menuButton.classList.remove('cross');
        }
      },
      slideChangeTransitionEnd: function () {
        const slider = this;
        if (slider.activeIndex === 1) {
          // openMenu()
          menuButton.addEventListener('click', openMenu, true);
        }
      },
    },
  });
console.log(swiperhdcd,'swiperhdcd')
});

</script>

<template>
  <div class="swiper hdcd">
    <div class="swiper-wrapper">

<!--      展开的蓝色页面-->
      <div class="swiper-slide menu">Menu slide</div>
      <div class="swiper-slide content">
<!--        三的参数-->
        <div class="menu-button" >
          <div class="bar">111</div>
          <div class="bar">222</div>
          <div class="bar">3333</div>
          <div class="bar">3333</div>
        </div>
<!--        主体内容-->
        Content slide
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.imageStyle{
  display: block;
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  min-width: 100px;
  width: 70%;
  max-width: 320px;
  background-color: #2c8dfb;
  color: #fff;
}

.content {
  width: 100%;
}

.menu-button {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 15px;

  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #2c8dfb;

  /*margin: 14px;
  border-radius: 5px;*/
}

.menu-button .bar:nth-of-type(1) {
  margin-top: 0px;
}

.menu-button .bar:nth-of-type(3) {
  margin-bottom: 0px;
}

.bar {
  position: relative;
  display: block;
  width: 50px;
  height: 5px;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.menu-button:hover .bar:nth-of-type(1) {
  -webkit-transform: translateY(1.5px) rotate(-4.5deg);
  -ms-transform: translateY(1.5px) rotate(-4.5deg);
  transform: translateY(1.5px) rotate(-4.5deg);
}

.menu-button:hover .bar:nth-of-type(2) {
  opacity: 0.9;
}

.menu-button:hover .bar:nth-of-type(3) {
  -webkit-transform: translateY(-1.5px) rotate(4.5deg);
  -ms-transform: translateY(-1.5px) rotate(4.5deg);
  transform: translateY(-1.5px) rotate(4.5deg);
}

.cross .bar:nth-of-type(1) {
  -webkit-transform: translateY(15px) rotate(-45deg);
  -ms-transform: translateY(15px) rotate(-45deg);
  transform: translateY(15px) rotate(-45deg);
}

.cross .bar:nth-of-type(2) {
  opacity: 0;
}

.cross .bar:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  -ms-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
}

.cross:hover .bar:nth-of-type(1) {
  -webkit-transform: translateY(13.5px) rotate(-40.5deg);
  -ms-transform: translateY(13.5px) rotate(-40.5deg);
  transform: translateY(13.5px) rotate(-40.5deg);
}

.cross:hover .bar:nth-of-type(2) {
  opacity: 0.1;
}

.cross:hover .bar:nth-of-type(3) {
  -webkit-transform: translateY(-13.5px) rotate(40.5deg);
  -ms-transform: translateY(-13.5px) rotate(40.5deg);
  transform: translateY(-13.5px) rotate(40.5deg);
}
</style>
